<template>
  <div id="monthlyStatDetailPage">
    <BreadcrumbComponent :breadcrumbItems="breadcrumbItems" />
    <a-space direction="vertical" style="width: 100%">
      <a-card title="基本參數" :bordered="false" :loading="loading">
        <a-descriptions>
          <a-descriptions-item label="員工編號">{{
            detail.staffCode
          }}</a-descriptions-item>
          <a-descriptions-item label="醫師姓名">{{
            detail.doctor.name
          }}</a-descriptions-item>
          <a-descriptions-item label="店鋪"
            >{{ detail.shop?.name }}({{ detail.shopId }})</a-descriptions-item
          >
          <a-descriptions-item label="醫師類別">{{
            detail.staffType === 1 ? "合作" : "員工"
          }}</a-descriptions-item>
          <a-descriptions-item label="駐診形式">{{
            detail.shiftType === 1 ? "全日" : "半日"
          }}</a-descriptions-item>
          <a-descriptions-item label="銷售統計月份">{{
            detail.statMonth
          }}</a-descriptions-item>
          <a-descriptions-item label="統計開始日期">{{
            detail.startDate
          }}</a-descriptions-item>
          <a-descriptions-item label="統計開始結束">{{
            detail.endDate
          }}</a-descriptions-item>
          <a-descriptions-item label="是否歸檔">{{
            detail.isArchived === 1 ? "是" : "否"
          }}</a-descriptions-item>
        </a-descriptions>
      </a-card>

      <a-card title="銷售參數" :bordered="false" :loading="loading">
        <a-row>
          <a-col :span="8">
            <a-statistic
              title="銷售總額"
              :precision="2"
              :value="detail.invoiceNet"
              prefix="$"
            />
          </a-col>
        </a-row>
        <a-divider />
        <a-row>
          <a-col :span="8">
            <a-statistic
              title="診金"
              :precision="2"
              :value="detail.consultFee"
              prefix="$"
            />
          </a-col>
          <a-col :span="8">
            <a-statistic
              title="診証次數"
              :value="detail.consultCount"
              :precision="0"
            />
          </a-col>
        </a-row>
        <a-divider />
        <a-row>
          <a-col :span="8">
            <a-statistic
              title="處方"
              :precision="2"
              :value="detail.cmAmount"
              prefix="$"
            />
          </a-col>
          <a-col :span="8">
            <a-statistic
              title="蟲草"
              :precision="2"
              :value="detail.cyAmount"
              prefix="$"
            />
          </a-col>
          <a-col :span="8">
            <a-statistic
              title="幹燕"
              :precision="2"
              :value="detail.neAmount"
              prefix="$"
            />
          </a-col>
        </a-row>
        <a-divider />
        <a-row>
          <a-col :span="8">
            <a-statistic
              title="安宮系列"
              :precision="2"
              :value="detail.agAmount"
              prefix="$"
            />
          </a-col>
          <a-col :span="8">
            <a-statistic
              title="本廠產品"
              :precision="2"
              :value="detail.wytAmount"
              prefix="$"
            />
          </a-col>
          <a-col :span="8">
            <a-statistic
              title="OEM"
              :precision="2"
              :value="detail.oemAmount"
              prefix="$"
            />
          </a-col>
        </a-row>
        <a-divider />
        <a-row>
          <a-col :span="8">
            <a-statistic
              title="針灸"
              :precision="2"
              :value="detail.apAmount"
              prefix="$"
            />
          </a-col>
          <a-col :span="8">
            <a-statistic title="次數" :value="detail.apCount" :precision="0" />
          </a-col>
        </a-row>
        <a-divider />
        <a-row>
          <a-col :span="8">
            <a-statistic
              title="天灸"
              :precision="2"
              :value="detail.tpAmount"
              prefix="$"
            />
          </a-col>
          <a-col :span="8">
            <a-statistic title="次數" :value="detail.tpCount" :precision="0" />
          </a-col>
        </a-row>
        <a-divider />
        <a-row>
          <a-col :span="8">
            <a-statistic
              title="套票"
              :precision="2"
              :value="detail.packageAmount"
              prefix="$"
            />
          </a-col>
        </a-row>
      </a-card>
      <BackButton />
    </a-space>
    <!-- 組件模板內容 -->
  </div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import BreadcrumbComponent from "@/components/BreadcrumbComponent.vue";
import BackButton from "@/components/BackButton.vue";
import { useRoute, useRouter } from "vue-router";
import { monthlyStatApi } from "@/api";

const breadcrumbItems = [
  { url: "/sales/monthly-stat", name: "月銷售統計管理" },
  { url: "", name: "詳情" },
];

const route = useRoute();
const router = useRouter();

const loading = ref(true);
const detail = reactive<any>({});

const fetchDetail = async () => {
  try {
    loading.value = true;
    const { data } = await monthlyStatApi.getMonthlyStatDetail(
      Number(route.params.id)
    );
    Object.assign(detail, data);
    detail.cyNeAmount = Number(detail.cyAmount) + Number(detail.neAmount);
  } catch (error) {
    console.error("獲取消息詳情失敗", error);
  } finally {
    loading.value = false;
  }
};

// 初始化加載
onMounted(() => {
  fetchDetail();
});
</script>
<style scoped></style>
